<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <div id="app">
      <!-- 插值绑定 -->
      <p>{{name}}</p>
      <!-- 指令系统 -->
      <p k-text="name"></p>
      <p>{{age}}</p>
      <p>{{doubleAge}}</p>
      <!-- 双向绑定 -->
      <input type="text" k-model="name" />
      <!-- 事件处理 -->
      <button @click="changeName">呵呵</button>
      <!-- html内容解析 -->
      <div k-html="html"></div>
    </div>
    <script src="./Compile.js"></script>
    <script src="./myvue.js"></script>
    <script>
      new KVue({
        el: "#app",
        data: {
          name: "I am wcb.",
          age: 17,
          html: "<button>这是一个按钮</button>",
        },
        created() {
          console.log("开始啦");
          setTimeout(() => {
            this.name = "我是异步事件";
          }, 1500);
        },
        methods: {
          changeName() {
            this.name = "哈喽，哈哈哈哈";
            this.age = 20;
            this.id = "xx";
            console.log(1, this);
          },
        },
      });
    </script>
  </body>
</html>
